<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;
const location = ref('')
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "42e181058003a9ae2ae0e22605f8a25f",
  };
  AMapLoader.load({
    key: "1a4315bd574979f45e170d7c5a948f36", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      const layers = [
        //   这里地图颜色根据传入的typeNum，0：quality-map 1和2：其他类型的地图，找到的图片位置为/townMap/00.png or 01.png 02.pnt等
        new AMap.ImageLayer({
          url: `/00.png`,
          bounds: new AMap.Bounds([113.416063, 22.617166], [114.31293, 23.204142]),
        }),
      ];
  map = new AMap.Map("container", {
    // 设置地图容器id
    viewMode: "2D", // 是否为3D地图模式
    zoom: 10, // 初始化地图级别
    center: [113.887373, 22.912443], // 初始化地图中心点位置
    layers
  });
  map.setMapStyle("amap://styles/darkblue");
  map.on('click', (item) => {
    location.value = item.lnglat.lng +','+item.lnglat.lat
  })
})
  .catch((e) => {
    // console.log(e);
  });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div class="box">
    <div id="container"></div>
    <div>{{ location }}</div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  #container {
    width: 100%;
    height: 90%;
  }
}
</style>
